<template>
    <div class="audio_box">
        <div class="player">
            <div class="player_left">
                <div id="box" class="photo pause">
                    <img src="https://tse4-mm.cn.bing.net/th/id/OIF-C.YAk2sAC6QIqAMeWesdi3yg?w=146&h=150&c=7&r=0&o=5&dpr=2&pid=1.7" alt="">
                </div>
                <div class="text">XO (only if you say yes )-ENHYPEN</div>  
            </div>
            <div class="player_right">
                <div class="player_button" @click="playMusic">
                    <van-icon v-if="!isPlayer" name="play-circle-o" size="25px" />
                    <van-icon v-else name="pause-circle-o" size="25px" />
                </div>  
                <div class="player_list">
                    <van-icon name="bars" size="25px" />
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import {ref} from 'vue';
let isPlayer = ref(true);
let isRototaing = ref(false);
let audioObj = new Audio('/public/ENHYPEN - XO (Only If You Say Yes).mp3')


function toggleRotation () {
    isRototaing. value = !isRototaing.value;
    if (!isRototaing.value) {
        document.getElementById('box').classList. remove('paused');
} else {
        document.getElementById('box') .classList.add ('paused');
}
}

function playMusic(){ 
    toggleRotation ()
    if (isPlayer.value){
        audioObj.pause();
    }else{
        audioObj.play();
    }
    isPlayer.value = !isPlayer.value
   
}
</script>
<style scoped>
.audio_box{
border-top: 1px solid #ccc;
padding: 5px;
position: fixed;
bottom: 0; width: 90%;
background-color: #ef9a9a;
}
.audio_box .player{
    display: flex;
    justify-content: space-between;
    align-items:center;
}

.player_left{
    display: flex;
    align-items: center;
}
.player_right{
    display: flex;
    align-items: center;
}

.player_left .photo{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    transition: transform 0.5s ease;
}

.player_left .photp img{
    width: 100%;
    height: 100%;
}

.player_left .text{
    margin-left: 5px;
}

.player_right .player_button{
    margin-right: 10px;
}


#box{
    animation: rotateAnimation 2s infinite linear;
}

@keyframes rotateAnimation{
    from{
        transform: rotate(0deg);
    }

    to{
        transform: rotate(360deg);
    }
}

#box.paused{
    animation-play-state: paused;
}
</style>